import React, { memo } from 'react';

import styles from './style.less';

import WidgetBoard from '@/components/WidgetBoard';

import { dashboardWidgetsItem } from '@/pages/SelfQuery/type';

interface WidgetBoardListProps {
  widgets: Array<dashboardWidgetsItem>;
  manage?: boolean
  removeWidgets?: (id: number) => void;
}

const WidgetBoardList: React.FC<WidgetBoardListProps> = memo((props) => {
  const { widgets, manage, removeWidgets } = props;
  
  return (
    <div className={styles.widgetBoardBody}>
      {widgets.map((item) => (
        <WidgetBoard key={item.widgetId} widget={item} manage={manage} removeWidgets={removeWidgets}/>
      ))}
    </div>
  );
});

export default WidgetBoardList;
